<template>
  <div class="f_div">
    <div class="t_div">在途监控 / <a href="#">异常管理</a></div>
    <el-container>
      <el-header class="header"
        ><div class="h_div">
          <div class="h_in_vid">
            <el-button type="primary" style="width: 80px" @click="add"
              >上报</el-button
            >
          </div>
        </div></el-header
      >
      <el-header class="header2"
        ><div class="h_div">
          <el-form>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="处理状态">
                  <el-select
                    v-model="value"
                    placeholder="请选择"
                    style="width: 300px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.dict_value"
                      :label="item.dict_label"
                      :value="item.dict_value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="订单状态">
                  <el-select
                    v-model="value2"
                    placeholder="请选择"
                    style="width: 300px"
                  >
                    <el-option
                      v-for="item in options2"
                      :key="item.dict_value"
                      :label="item.dict_label"
                      :value="item.dict_value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="事件日期">
                  <el-date-picker
                    v-model="value3"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="请选择日期"
                    end-placeholder="请选择日期"
                    :size="size"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="7">
                <el-form-item label="处理日期">
                  <el-date-picker
                    v-model="value4"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="请选择日期"
                    end-placeholder="请选择日期"
                    :size="size"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-input
                  style="margin-left: 16px; margin-right: 16px"
                  v-model="value5"
                  placeholder="请输入客户搜索"
                ></el-input>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" style="width: 80px" @click="show"
                  >搜索</el-button
                >
                <el-button style="width: 80px" @click="reset">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-header>
      <el-main class="main">
        <el-table
          height="442px"
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            background: '#F7F7F7',
            color: '#999',
            textAlign: 'center',
          }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            prop="exc_number"
            label="异常单号"
            width="220"
          ></el-table-column>
          <el-table-column
            prop="client_name"
            label="客户"
            width="140"
          ></el-table-column>
          <el-table-column prop="ord_state" label="订单状态" width="100">
            <!-- <el-button link type="success" v-if="scoped.row.ord_state == 0">
              启用
            </el-button>
            <el-button link type="danger" v-if="scoped.row.ord_state == 1">
              禁用
            </el-button> -->
          </el-table-column>
          <el-table-column
            prop="cr_cp_name"
            label="承运商"
            width="220"
          ></el-table-column>
          <el-table-column
            prop="dv_name"
            label="司机"
            width="100"
          ></el-table-column>
          <el-table-column prop="dv_phone" label="手机号码" width="140">
          </el-table-column>
          <!-- <el-table-column
            prop="create_by"
            label="创建人"
            width="140"
          ></el-table-column> -->
          <el-table-column prop="vc_phone" label="车牌号" width="120">
          </el-table-column>
          <el-table-column prop="event_type" label="事件类型" width="200">
          </el-table-column>
          <el-table-column prop="event_time" label="事件时间" width="200">
          </el-table-column>
          <el-table-column prop="event_place" label="事件地点" width="200">
          </el-table-column>
          <el-table-column prop="event_plain" label="事件说明" width="300">
          </el-table-column>
          <el-table-column prop="report_by" label="上报人" width="200">
          </el-table-column>
          <el-table-column prop="report_time" label="上报时间" width="200">
          </el-table-column>
          <el-table-column prop="mea_status" label="处理状态" width="200">
            <!-- <el-button link type="success" v-if="scoped.row.mea_status == 0">
              启用
            </el-button>
            <el-button link type="danger" v-if="scoped.row.mea_status == 1">
              禁用
            </el-button> -->
          </el-table-column>
          <el-table-column prop="mea_by" label="处理人" width="200">
          </el-table-column>
          <el-table-column prop="mea_time" label="处理时间" width="200">
          </el-table-column>
          <el-table-column prop="measures" label="处理措施" width="500">
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template #default="scoped">
              <el-button link type="primary" @click="edit(scoped.row.exc_id)">
                编辑
              </el-button>
              <el-button link type="primary" @click="editcl(scoped.row.exc_id)" v-if="scoped.row.mea_status != '已完成'">
                处理异常
              </el-button>
              <el-button link type="primary" @click="dialogVisible4 = true;cl_id = scoped.row.exc_id" v-if="scoped.row.mea_status != '已完成'">
                完成
              </el-button>
              <el-button link type="danger" @click="dialogVisible5 = true;del_id = scoped.row.exc_id" v-if="scoped.row.mea_status != '已完成'">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[4, 6, 8, 10]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
      <div>
        <el-dialog
          v-model="dialogVisible"
          title="
          异常事件上报"
          width="500"
          :before-close="handleClose"
        >
          <el-form
            ref="ruleAddRef"
            style="max-width: 600px"
            :model="addForm"
            :rules="addrules"
            label-width="auto"
            class="demo-ruleForm"
            status-icon
          >
            <el-form-item label="事件类型" prop="event_type">
              <el-select
                v-model="addForm.event_type"
                placeholder="请选择"
                style="width: 220px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.dict_code"
                  :label="item.dict_label"
                  :value="item.dict_code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="运单号" prop="wb_id">
              <el-select
                v-model="addForm.wb_id"
                placeholder="请选择"
                style="width: 220px"
              >
                <el-option
                  v-for="item in options3"
                  :key="item.wb_id"
                  :label="item.wb_number"
                  :value="item.wb_id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="事件时间" prop="event_time">
              <el-date-picker
                v-model="addForm.event_time"
                type="date"
                placeholder="请选择时间"
                :size="size"
              />
            </el-form-item>
            <el-form-item label="事件地点" prop="event_place">
              <el-input
                v-model="addForm.event_place"
                placeholder="请输入内容"
              />
            </el-form-item>
            <el-form-item label="事件说明" prop="event_plain">
              <el-input
                v-model="addForm.event_plain"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="handleClose">取消</el-button>
              <el-button type="primary" @click="handleAdd"> 保存 </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
      <div>
        <el-dialog
          v-model="dialogVisible2"
          title="异常事件上报"
          width="500"
          :before-close="handleClose2"
        >
          <el-form
            ref="ruleEditRef"
            style="max-width: 600px"
            :model="editForm"
            :rules="editrules"
            label-width="auto"
            class="demo-ruleForm"
            status-icon
          >
            <el-form-item label="事件类型" prop="event_type">
              <el-select
                v-model="editForm.event_type"
                placeholder="请选择"
                style="width: 220px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.dict_code"
                  :label="item.dict_label"
                  :value="item.dict_code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="运单号" prop="wb_id">
              <el-select
                v-model="editForm.wb_id"
                placeholder="请选择"
                style="width: 220px"
              >
                <el-option
                  v-for="item in options3"
                  :key="item.wb_id"
                  :label="item.wb_number"
                  :value="item.wb_id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="事件时间" prop="event_time">
              <el-date-picker
                v-model="editForm.event_time"
                type="date"
                placeholder="请选择时间"
                :size="size"
              />
            </el-form-item>
            <el-form-item label="事件地点" prop="event_place">
              <el-input
                v-model="editForm.event_place"
                placeholder="请输入内容"
              />
            </el-form-item>
            <el-form-item label="事件说明" prop="event_plain">
              <el-input
                v-model="editForm.event_plain"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="handleClose2">取消</el-button>
              <el-button type="primary" @click="handleEdit"> 保存 </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
      <div>
        <el-dialog
          v-model="dialogVisible3"
          title="处理异常事件"
          width="500"
          :before-close="handleClose3"
        >
          <el-form
            ref="ruleMeaRef"
            style="max-width: 600px"
            :model="meaForm"
            label-width="auto"
            class="demo-ruleForm"
            status-icon
          >
            <el-form-item label="事故原因" prop="event_cause">
              <el-input
                v-model="meaForm.event_cause"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
            <el-form-item label="事故影响" prop="event_effect">
              <el-input
                v-model="meaForm.event_effect"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
            <el-form-item label="处理措施" prop="measures">
              <el-input
                v-model="meaForm.measures"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="handleClose3">取消</el-button>
              <el-button type="primary" @click="handleMea"> 保存 </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
      <div>
        <el-dialog v-model="dialogVisible4" title="操作确认" width="500">
          <div>确定当前异常事件已处理完成吗？</div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogVisible4 = false">取消</el-button>
              <el-button type="primary" @click="handleQR"> 保存 </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
      <div>
        <el-dialog v-model="dialogVisible5" title="操作确认" width="500">
          <span>确定删除当前异常事件吗？</span>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogVisible5 = false">取消</el-button>
              <el-button type="danger" @click="del"> 删除 </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </el-container>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import $http from "@/axios/base";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "app",
  setup() {
    const tableData = ref();
    const tableHeight = ref();
    const currentPage = ref(1);
    const pageSize = ref(10);
    const value = ref();
    const value2 = ref();
    const value3 = ref();
    const value4 = ref();
    const value5 = ref();
    const background = ref(true);
    const count = ref();

    const options = ref();
    const options2 = ref();
    const options3 = ref();

    const cl_id = ref();
    const del_id = ref();

    const dialogVisible = ref(false);
    const dialogVisible2 = ref(false);
    const dialogVisible3 = ref(false);
    const dialogVisible4 = ref(false);
    const dialogVisible5 = ref(false);

    const addrules = ref({
      event_type: [
        { required: true, message: "请选择事件类型", trigger: "change" },
      ],
      wb_id: [{ required: true, message: "请选择运单号", trigger: "change" }],
    });
    const addForm = reactive({
      exc_number: "",
      event_type: "",
      wb_id: "",
      event_time: "",
      event_place: "",
      event_plain: "",
      report_by: sessionStorage.getItem("empname"),
      report_time: new Date().toISOString().slice(0, 10).toString(),
    });
    const ruleAddRef = ref();
    const ruleEditRef = ref();
    const editrules = ref({
      event_type: [
        { required: true, message: "请选择事件类型", trigger: "change" },
      ],
      wb_id: [{ required: true, message: "请选择运单号", trigger: "change" }],
    });
    const editForm = reactive({
      exc_id: 0,
      event_type: "",
      wb_id: "",
      event_time: "",
      event_place: "",
      event_plain: "",
      update_by: sessionStorage.getItem("empname"),
      update_time: new Date().toISOString().slice(0, 10).toString(),
    });
    const ruleMeaRef = ref();
    const meaForm = reactive({
      exc_id: 0,
      event_cause: "",
      event_effect: "",
      mea_status: 56,
      mea_by: sessionStorage.getItem("empname"),
      mea_time: new Date().toISOString().slice(0, 10).toString(),
      measures: "",
    });

    const handleSizeChange = (value) => {
      pageSize.value = value;
      show();
    };

    const handleCurrentChange = (value) => {
      currentPage.value = value;
      show();
    };

    const dd = () => {
      $http
        .get(`http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas`, {
          params: {
            type: "Ow_status",
          },
        })
        .then((res) => {
          options2.value = res;
        })
        .catch((err) => console.log(err));
    };

    const cl = () => {
      $http
        .get(`http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas`, {
          params: {
            type: "Event_type",
          },
        })
        .then((res) => {
          options.value = res;
        })
        .catch((err) => console.log(err));
    };

    const getType = (id, code, flag) => {
      if (id == null) {
        return;
      }
      $http
        .get("http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_datacode", {
          params: {
            Dict_code: id,
          },
        })
        .then((res) => {
          for (let i = 0; i < tableData.value.length; i++) {
            if (code == tableData.value[i].exc_id && flag == 1) {
              tableData.value[i].mea_status = res;
            }
            if (code == tableData.value[i].exc_id && flag == 2) {
              tableData.value[i].event_type = res;
            }
          }
        })
        .catch((err) => console.log(err));
    };

    const getOrder = () => {
      $http
        .get(`http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas`, {
          params: {
            type: "Ow_status",
          },
        })
        .then((res) => {
          tableData.value.forEach((item, index) => {
            res.forEach((item2, index2) => {
              if (tableData.value[index].ord_state == item2.dict_value) {
                tableData.value[index].ord_state = item2.dict_label;
              }
            });
          });
        })
        .catch((err) => console.log(err));
    };

    const getWb_id = () => {
      $http
        .get(`http://localhost:5261/api/Exce/GetWb_id`)
        .then((res) => {
          options3.value = res;
        })
        .catch((err) => console.log(err));
    };

    const getCount = () => {
      if (
        value3.value != "" &&
        value3.value != null &&
        value3.value != undefined
      ) {
        var time1 = new Date(value3.value[0])
          .toISOString()
          .slice(0, 10)
          .toString();
        var time2 = new Date(value3.value[1])
          .toISOString()
          .slice(0, 10)
          .toString();
      }
      if (
        value4.value != "" &&
        value4.value != null &&
        value4.value != undefined
      ) {
        var time3 = new Date(value4.value[0])
          .toISOString()
          .slice(0, 10)
          .toString();
        var time4 = new Date(value4.value[1])
          .toISOString()
          .slice(0, 10)
          .toString();
      }
      $http
        .get(`http://localhost:5261/api/Exce/GetCount`, {
          params: {
            status: value.value,
            state: value2.value,
            event1: time1,
            event2: time2,
            m_time1: time3,
            m_time2: time4,
            cname: value5.value,
          },
        })
        .then((res) => {
          count.value = res;
        })
        .catch((err) => console.log(err));
    };

    const show = () => {
      console.log(value);
      if (
        value3.value != "" &&
        value3.value != null &&
        value3.value != undefined
      ) {
        var time1 = new Date(value3.value[0])
          .toISOString()
          .slice(0, 10)
          .toString();
        var time2 = new Date(value3.value[1])
          .toISOString()
          .slice(0, 10)
          .toString();
      }
      if (
        value4.value != "" &&
        value4.value != null &&
        value4.value != undefined
      ) {
        var time3 = new Date(value4.value[0])
          .toISOString()
          .slice(0, 10)
          .toString();
        var time4 = new Date(value4.value[1])
          .toISOString()
          .slice(0, 10)
          .toString();
      }
      $http
        .get(
          `http://localhost:5261/api/Exce/GetExce/${currentPage.value},${pageSize.value}`,
          {
            params: {
              status: value.value,
              state: value2.value,
              event1: time1,
              event2: time2,
              m_time1: time3,
              m_time2: time4,
              cname: value5.value,
            },
          }
        )
        .then((res) => {
          tableData.value = res.exception_Logs;
          console.log(res);
          res.orders.forEach((item, index) => {
            Object.assign(tableData.value[index], item);
          });
          res.wb_Meters.forEach((item, index) => {
            Object.assign(tableData.value[index], item);
          });
          res.drivers.forEach((item, index) => {
            Object.assign(tableData.value[index], item);
          });
          res.vehicles.forEach((item, index) => {
            Object.assign(tableData.value[index], item);
          });
          res.carrier.forEach((item, index) => {
            Object.assign(tableData.value[index], item);
          });
          tableData.value.forEach((item, index) => {
            getOrder();
            getType(item.mea_status, item.exc_id, 1);
            getType(item.event_type, item.exc_id, 2);
            item.event_time = new Date(item.event_time).toISOString().slice(0, 10).toString();
            item.report_time = new Date(item.report_time).toISOString().slice(0, 10).toString();
            if(item.mea_time != undefined)
              item.mea_time = new Date(item.mea_time).toISOString().slice(0, 10).toString();
          });
          getCount();
        })
        .catch((err) => console.log(err));
    };

    const reset = () => {
      value.value = "";
      value2.value = "";
      value3.value = "";
      value4.value = "";
      value5.value = "";
    };

    const handleClose = () => {
      resetForm();
      dialogVisible.value = false;
    };

    const handleClose2 = () => {
      resetForm2();
      dialogVisible2.value = false;
    };

    const resetForm = () => {
      ruleAddRef.value.resetFields();
    };

    const resetForm2 = () => {
      ruleEditRef.value.resetFields();
    };

    const add = () => {
      dialogVisible.value = true;
      // console.log("1111");
    };

    const edit = (id) => {
      $http
        .get(`http://localhost:5261/api/Exce/GetException/${id}`)
        .then((res) => {
          editForm.exc_id = res.exc_id;
          editForm.event_type = parseInt(res.event_type);
          editForm.wb_id = res.wb_id;
          editForm.event_time = res.event_time;
          editForm.event_place = res.event_place;
          editForm.event_plain = res.event_plain;
          dialogVisible2.value = true;
        })
        .catch((err) => console.log(err));
    };

    const handleEdit = () => {
      ruleEditRef.value.validate((valid) => {
        if (valid) {
          editForm.event_type = editForm.event_type.toString();
          $http
            .put(`http://localhost:5261/api/Exce/EditExce/register`, editForm)
            .then((res) => {
              if (res) {
                dialogVisible2.value = false;
                ElMessage.success("修改成功");
                resetForm2();
                show();
              }
            })
            .catch((err) => console.log(err));
        }
      });
    };

    const getcode = () => {
      $http
        .get("http://localhost:5261/api/BH/BHGZ", {
          params: {
            prefix: "YC",
          },
        })
        .then((res) => {
          addForm.exc_number = res;
        })
        .catch((err) => console.log(err));
    };

    //转日期yyyy-MM-dd
    function formatDate(date) {
      let year = date.getFullYear();
      let month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月份从0开始，所以要加1
      let day = date.getDate().toString().padStart(2, "0");
      return `${year}-${month}-${day}`;
    }

    const handleAdd = () => {
      ruleAddRef.value.validate((valid) => {
        if (valid) {
          addForm.event_time = new Date(formatDate(addForm.event_time))
            .toISOString()
            .slice(0, 10)
            .toString();
            addForm.event_type = addForm.event_type.toString();
          $http
            .post(`http://localhost:5261/api/Exce/AddExce/register`, addForm)
            .then((res) => {
              if (res) {
                dialogVisible.value = false;
                ElMessage.success("添加成功");
                show();
                resetForm();
              }
            })
            .catch((err) => console.log(err));
        }
      });
    };

    const handleQR = () => {
      ElMessageBox.confirm("确认是否已完成处理完成当前异常事件？", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
        draggable: true,
        overflow: true,
        lockScroll: false, //防止抖动
      })
        .then(() => {
          $http
            .put(`http://localhost:5261/api/Exce/WcExce/${cl_id.value}`)
            .then((res) => {
              show();
              getCount();
              dialogVisible4.value = false;
              ElMessage.success("操作成功");
            })
            .catch((err) => console.log(err));
        })
        .catch(() => {
          ElMessage.info("取消操作");
        });
    };

    const del = () => {
      ElMessageBox.confirm("确认是否删除？", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
        draggable: true,
        overflow: true,
        lockScroll: false, //防止抖动
      })
        .then(() => {
          $http
            .delete(`http://localhost:5261/api/Exce/DelExce/${del_id.value}`)
            .then((res) => {
              show();
              getCount();
              dialogVisible5.value = false;
              ElMessage.success("删除成功");
            })
            .catch((err) => console.log(err));
        })
        .catch(() => {
          ElMessage.info("取消操作");
        });
    }

    const editcl = (id) => {
      $http
        .get(`http://localhost:5261/api/Exce/GetException/${id}`)
        .then((res) => {
          meaForm.exc_id = res.exc_id;
          meaForm.event_cause = res.event_cause;
          meaForm.event_effect = res.event_effect;
          meaForm.measures = res.measures;
          dialogVisible3.value = true;
        })
        .catch((err) => console.log(err));
    };

    const handleClose3 = () => {
      resetForm3();
      dialogVisible3.value = false;
    };

    const resetForm3 = () => {
      ruleMeaRef.value.resetFields();
    };

    const handleMea = () => {
      ruleMeaRef.value.validate((valid) => {
        if (valid) {
          console.log(meaForm);
          $http
            .put(`http://localhost:5261/api/Exce/ClExce/register`, meaForm)
            .then((res) => {
              if (res) {
                dialogVisible3.value = false;
                ElMessage.success("操作成功");
                show();
                resetForm3();
              }
            })
            .catch((err) => console.log(err));
        }
      });
    };

    onMounted(() => {
      dd();
      cl();
      getWb_id();
      show();
      getcode();
    });

    return {
      handleQR,
      del_id,
      currentPage,
      pageSize,
      tableData,
      tableHeight,
      value,
      value2,
      value3,
      value4,
      value5,
      options,
      options2,
      options3,
      background,
      count,
      dialogVisible2,
      dialogVisible4,
      dialogVisible5,
      handleAdd,
      reset,
      handleCurrentChange,
      handleSizeChange,
      show,
      handleClose,
      handleClose2,
      handleClose3,
      handleEdit,
      handleMea,
      ruleMeaRef,
      meaForm,
      editrules,
      dialogVisible,
      dialogVisible3,
      ruleAddRef,
      ruleEditRef,
      editForm,
      addrules,
      addForm,
      add,
      edit,
      editcl,
      cl_id,
      del,
    };
  },
};
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: right;
  margin-top: 20px;
}
.t_div {
  margin-bottom: 20px;
  text-align: left;
  font-size: 14px;
  color: #b3b4b6;
}
a {
  text-decoration: none;
}
.f_div {
  padding: 0px 50px;
}
.h_div {
  height: 39px;
  margin-top: 15px;
}
.h_in_vid {
  width: 800px;
  height: 20px;
  margin-top: 20px;
  display: flex;
}
.header {
  background-color: #ffffff;
  border-radius: 10px 10px 0px 0px;
}
.header2 {
  background-color: #ffffff;
  height: 100px;
}
.main {
  background-color: #ffffff;
  border-radius: 0px 0px 10px 10px;
  height: 650px;
}
</style>